<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabsList"
      :key="item.tabKey"
      :label="item.label"
      :name="item.name"
    >
      <keep-alive>
        <component
          :is="item.children"
          v-if="item.active"
          :ref="'table' + item.tabKey"
          :tab-key="item.tabKey"
        />
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'HlTabs',
  props: {
    tabsList: {
      type: Array,
      default: () => []
    },
    isTable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      activeName: ''
    }
  },
  created() {
    this.initActive()
  },
  methods: {
    initActive() {
      this.activeName = this.tabsList.find((item) => item.active)?.name
    },
    handleClick(tab) {
      this.tabsList.forEach((item) => {
        if (item.tabKey === tab.index) {
          item.active = true
        } else {
          item.active = false
        }
      })
      this.tableHandleFn(tab.index)
    },
    tableHandleFn(index) {
      if (this.isTable) {
        this.$nextTick(() => {
          const refValue = this.$refs[`table${index}`][0]
          if (refValue && refValue.hlTable) {
            refValue.hlTable()
          }
        })
      }
    }
  }
}
</script>
